<template>
  <div class="about">
    <van-nav-bar
      title="添加"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-form @submit="onSubmit">
      <van-field
        v-model="obj.name"
        name="公司名称"
        label="公司名称"
        placeholder="公司名称"
        :rules="[{ required: true, message: '请填写名称' }]"
      />

      <van-field name="uploader" label="公司logo">
        <template #input>
          <van-uploader v-model="obj.logo" />
        </template>
      </van-field>
      <van-field
        v-model="obj.job"
        type="text"
        name="job"
        label="职位"
        placeholder="职位"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="obj.minMoney"
        type="text"
        name="minMoney"
        label="最低薪资"
        placeholder="最低薪资"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="obj.maxMoney"
        type="text"
        name="maxMoney"
        label="最高薪资"
        placeholder="最高薪资"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <van-field name="ageslider" label="年龄">
        <template #input>
          <van-slider
            v-model="age"
            active-color="#ee0a24"
            range
            @change="ageChange"
          >
            <template #left-button>
              <div class="custom-button">{{ obj.minAge }}</div>
            </template>
            <template #right-button>
              <div class="custom-button">{{ obj.maxAge }}</div>
            </template>
          </van-slider>
        </template>
      </van-field>

      <!-- 年龄 -->

      <van-field name="slider" label="工龄">
        <template #input>
          <van-slider
            v-model="jobAge"
            active-color="#ee0a24"
            range
            @change="jobAgeChange"
          >
            <template #left-button>
              <div class="custom-button">{{ obj.jobminAge }}</div>
            </template>
            <template #right-button>
              <div class="custom-button">{{ obj.jobmaxAge }}</div>
            </template>
          </van-slider>
        </template>
      </van-field>

      <!-- 工龄 -->

      <van-field
        readonly
        clickable
        name="area"
        :value="obj.area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>

    <van-popup v-model="showArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
      />
    </van-popup>
    <!-- 省市区的选择 -->
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      obj: {
        name: "",
        logo: [],
        minMoney: "",
        maxMoney: "",
        job: "",
        minAge: 0,
        maxAge: 100,
        jobminAge: 0,
        jobmaxAge: 20,
        area: "",
      },

      age: [0, 100],

      jobAge: [0, 20],

      showArea: false,
      //省市区选择
      areaList,
      //省市区的数据,

      id: this.$route.query.id,
    };
  },
  created() {
    if (this.id) {
      console.log(this.id);
      let res = this.$store.state.list.filter((i) => i.id == this.id)[0];
      //可以用find 和foreach  filter 因为得到的是一个数组 所以要加下标
      this.obj = res;
    }
  },
  //进入页面 有id就证明现在要编辑 数据回填

  methods: {
    ageChange(val) {
      console.log(val);
      this.obj.minAge = val[0];
      this.obj.maxAge = val[1];
    },
    //拿到最大最小年龄
    jobAgeChange(val) {
      this.obj.jobminAge = val[0];
      this.obj.jobmaxAge = val[1];
    },
    //拿到最小最大工龄
    onConfirm(val) {
      console.log(val);
      this.obj.area = val.map((i) => i.name).join("/");
      this.showArea = false;
    },
    //拿到省市区
    onSubmit() {
      if (this.id) {
        //如果有id就是修改
        this.$store.commit("update", { obj: this.obj, id: this.id });
      } else {
        // 没有id就是添加
        let obj = {
          ...this.obj,
          time: new Date(),
          id: new Date().getTime(),
        };
        this.$store.commit("add", obj);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 100px;
}
</style>
